<script setup>
	import { ref, computed} from 'vue'

	// 礼物清单
	const goods = ref([
		{id: 1, name: '篮球', num: 1},
		{id: 2, name: '玩具', num: 3},
		{id: 3, name: '书籍', num: 2}
	])

	// 计算属性
	const totalCount = computed(() => {
		console.log('computed');
		return goods.value.reduce((prev, item) => prev + item.num, 0)
	})
	
	// 函数
	const getTotalCount = () => {
		console.log('func');
	  return goods.value.reduce((prev, item) => prev + item.num, 0)
	}

	/*
		解答 08 的疑惑
			因为计算属性有缓存 在原始数据不变的情况下 只会执行一次
			但是函数没有缓存 每次执行都会调用
		计算属性特点：
			1. 可以配合指令(v-text v-html)和插入表达式使用
			2. 在 js 中要加 .value
		函数的特点：
			1. 也可以配合指令(v-text v-html)和插入表达式使用
			2. 通常与事件一起使用
		所以 计算属性是应用在获取属性 普通函数是应用在事件处理
	*/
</script>


<template>
	<h4>比特人的礼物清单</h4>
	<table>
		<thead>
			<tr>
				<th>名字</th>
				<th>数量</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="item in goods">
				<td>{{ item.name }}</td>
				<td>{{ item.num }}个</td>
			</tr>
		</tbody>
	</table>
	<p>礼物总数：{{ totalCount }} 个</p>
	<p>礼物总数：{{ totalCount }} 个</p>
	<p>礼物总数：{{ totalCount }} 个</p>
	<hr>
	<p>礼物总数：{{ getTotalCount() }} 个</p>
	<p>礼物总数：{{ getTotalCount() }} 个</p>
	<p>礼物总数：{{ getTotalCount() }} 个</p>
</template>


<style scoped>
	table {
		border: 1px solid #333;
	}
	table th,
	table td {
		border: 1px solid #333;
		width: 100px;
		text-align: center;
	}
</style>
